<template>
  <div class="login-container">
    <el-form
      :model="form"
      status-icon
      ref="form"
      label-width="100px"
      class="login-form"
    >
      <h1 class="title-zc" >逆风快递管理系统</h1>
      <el-form-item  prop="username"  >
        <div class="username">
        <el-input v-model="form.username" type="text" name="username" style="width: 200px " placeholder="请输入用户名" i class="el-icon-s-check"></el-input>
        </div>
      </el-form-item>

      <el-form-item label="" prop="password">
        <div class="passw">
        <el-input
          i class ="el-icon-lock"
          name="password"
          style="width: 200px; "
          type="password"
          v-model="form.password"
          autocomplete="off"
          placeholder="请输入密码"


        ></el-input>
        </div>
      </el-form-item>
      <div>
      <div class="inp">
        <el-input type="text"  v-model="yzm" placeholder="请输入验证码" style="width: 120px" ></el-input>
      </div>
       <div @click="refreshCode" style="cursor: pointer;" class="imgs" >
        <Identify :identifyCode="identifyCode"  ></Identify>
      </div>
      </div>
      <br><br>

      <br>
      <el-form-item>
        <el-button type="info"  @click="submitForm" style="width: 100px " round>登 录</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import router from "../router";
import Identify from "../view/carManage/Identify";

export default {
  name: "Login",
  components:{
    Identify
  },
  data(){
    return{
      form:{
        username:'',
        password:''
      },
      identifyCode:'',
      identifyCodes: '123456789abcdefghijklmnopqrstuvwxyz',
      yzm:''
    }
  },
  mounted() {
    window.addEventListener('keydown',this.keyDown),
      this.refreshCode()
  },
  methods:{
  // 切换验证码
    refreshCode() {
  this.identifyCode = ''
  this.makeCode(this.identifyCodes, 4)
  console.log(this.identifyCode)
},
// 生成随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
          ]
      }
    },
    keyDown(e) {
      if (e.keyCode === 13) {
        if (this.form.username === '' || this.form.password === '') {
          this.$message.error('请输入登录信息')
          return false;
        } else {
          this.submitForm()
        }
      }
    },
    submitForm() {
      this.$http({
        method: "POST",
        url: "http://localhost:8090/login",
        params: this.form
      }).then(resp => {
        if (resp.data.code === 100000) {
         if(this.yzm === ''){
           this.$message.error("请输入验证码")
           return false
         }else if( this.yzm != this.identifyCode){
           this.$message.error("验证码有误，请重试")
           return false
         }else {
           this.$message({
             message: '登录' + resp.data.msg,
             type: "success",
           });
           //1。登陆成功  保存到 用户
           localStorage.setItem("token", this.form);
           //2。跳转
           router.push("/home")
         }
        } else {
          this.$message.error('登录' + resp.data.msg+'，请检查用户名和密码');

        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("../assets/pic2.jpg");

  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed
}
.login-form {
  width: 350px;
  margin: 150px auto;
 background-color: #c4efff;
  padding: 50px;
  border-radius: 20px;
  opacity: 0.9;
}
.title-zc {
  text-align: center;
}
.inp{
  float: left;
  margin-right: 20px;
  margin-left: 80px;
}
.imgs{
  float: left;
}
.username{
  margin-left: -20px;
}
.passw{
  margin-left: -20px;
}


</style>
